<template>
  <div id="nav"><!--导航栏-->
			<div class="navwrap">
			<ul>
				 <li><router-link :to="{name:'JueJingIndex',query:{type:'boke'}}">首页</router-link></li>
        <li><router-link :to="{name:'JueJingIndex',query:{type:'boke'}}">博客</router-link></li>
				<li><router-link :to="{name:'JueJingIndexzixun',query:{type:'zixun'}}">资讯</router-link></li>
				<li><a href="">活动</a></li>
				<li><a href="">开发社区</a></li>
				<li><a href="">商城</a></li>
				<li><a href="">APP</a></li>
				<li><a href="http://localhost:3000/user/login">个人中心</a></li>
				<li><a href=""><img src="~@assets/gg1.gif" alt="" width="90px" height="40px"></a></li>
				<li>
					<div class="wrap">
						<div class="search">
						   <input type="text" class="searchTerm" placeholder="探索稀土掘金">
						   <button type="submit" class="searchButton">
							 <i class="fa fa-search"></i>
						  </button>
						</div>
					</div>
				</li>	
			</ul>	
			</div>
		</div>
</template>

<script>
  export default {
      name:"nav",
  }
</script>

<style>
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
/*导航栏css*/
*{
	margin: auto;
	padding: auto;
	
}
body{
	background-color: #D3D3D3;
}
#nav
{
	width: 100%;
	font-size: 16px;
	
	background:rgb(250, 247, 247); 
	
}
.navwrap
{
width: 1000px;
    height: 70px;
    margin: 0 auto;
	
}
#nav ul
{
	width:100%;

	display: inline-block;
	/* margin-left: 130px; */
	
	list-style-type: none;

	
}
#nav li
{
	float: left;/*设置列表浮动*/
	margin-left: 15px;
	

}

#nav li:hover{
	
	border-bottom: 1px solid rgb(18, 34, 250);
}
#nav li:nth-child(7),
#nav li:nth-child(8),
#nav li:nth-child(9),
#nav li:nth-child(10),
#nav li:nth-child(11),
#nav li:nth-child(12):hover
{
	border-bottom: none;
}

#nav a
{
	line-height: 70px;
	
	margin:0 10px;
	color:rgb(46, 46, 46);
	text-decoration: none;
	
}
#nav li:nth-fast-child(){
	color: aqua;
}
/* 搜索框设置 */
.search {
	width: 250px;
	height: 40px;
	position: relative;
	display: flex;
  }
  
  .searchTerm {
	width: 250px;
	border: 1px solid #cdd1d1;
	border-right: none;
	padding: 5px;
	height: 40px;
	border-radius: 5px ;
	outline: none;
	color: #9DBFAF;
  }
  
  .searchTerm:focus{
	color: #d6dcdd;
  }
  
  .searchButton {
	width: 30px;
	height: 30px;
	border: 1px solid #d0d3d3;
	background: #dde9ed;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
	font-size: 10px;
	margin-left: -35px;
  }
  
  /*调整大小查看搜索栏的变化*/
  .wrap{
	width: 250px;
	position: absolute;
	margin-top: 35px;
	margin-left: 9%;
	transform: translate(-50%, -50%);
  }
  
  input:focus{
	  width: 300px;
	  border-color: #66afe9;
	  outline: 0;
	  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
  }
  button:focus
  {
	  margin-left: -25px;
  }
/* 首页二级导航 */
#nave
{
	width: 100%;
	font-size: 16px;
	background:rgb(250, 247, 247); 
	border: 1px solid rgb(201, 198, 198);
	
}
.navwrape
{
width: 726px;
    height: 50px;
    margin: 0 auto;
	
}
#nave ul
{
	width:100%;

	display: inline-block;
	/* margin-left: 230px; */
	
	list-style-type: none;

	
}
#nave li
{
	float: left;/*设置列表浮动*/
	margin-left: 15px;
	

}

#nave a
{
	line-height: 50px;
	
	margin:0 10px;
	color:rgb(57, 56, 56);
	text-decoration: none;
	
}

#nave li a:hover{
	color: #66afe9;
}

/* 左侧div
#left
{
	width: 200px;
	height: 760px;
	float: left;
	margin-top: 10px;
	margin-left: 80px;
	background:	teal;
}
span
{	
	font-size:18px;
	font-weight: bold;
	text-align: left;
	
	
    border:1px solid 	white;
	background-color:	#00008B;
	color:white;
	
	display:inline-block;
	
	
}
#left a
{
	line-height: 35px;
	font-weight: bold;
	margin:0 10px;
	color:#fff;
	text-decoration: none;
	
}
#left a:hover
{
	color:burlywood;
}
#left table td:hover
{	
	border: 1px solid grey;
    cursor: pointer; 
	color:#fff;
}
#left tr td
{
	width: 200px;
} */
/*中间div*/

.main
{    font-size: 16px;
    /* width: 95%; */
    /* float: left; */
    /* margin-top: 10px; */
    margin: 0 auto;
    background:rgb(244,245,245);
    overflow: hidden;
	
}

.userLayout{
  background-color: white;
}
.ct{
  width: 700px;
  background-color: white;
  height: 100%;
}
/* 第一篇文章 */
/* 第一篇文章中间上部分 */
.tzrn {
    width: 700px;
    margin: 0 auto;
	
}

/* 热门推荐导航 */
.tzr {
    height: 52px;
    /* background-color: rgb(250, 247, 247); */
	/* border: 1px solid #f6fafa; */
}



/* 目的: 让所有的文字在一行显示 */
.tzr .tzrn li {
    float: left;
    line-height: 52px;
}

.tzr .tzrn a {
    padding: 0 10px;
    border-right: 1px solid #666;
    
}


/* 清除a的边框线: 最后一个li里面的a */
.tzr .tzrn li:last-child a {
    border: 0;
}




.tzr a
{
	line-height: 35px;
	
	margin-left: 10px;
	color:rgb(57, 56, 56);
	text-decoration: none;
	
}
.tzr a:hover
{
	color:#66afe9;
}

.tjnr1{
	
	width: 700px;
	height: 160px;
	/* border: 1px solid #d0d3d3; */
	
	
}
 .tjnr1 #div1{
	contain: content;
	width: 100%;
	height: auto;
	margin-left: 20px;
	font-size: 18px;
	font-weight: bold;
}
.tjnr1 #div11{
	contain: content;
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-left: 20px;
	font-size: 13px;


}
.tjnr1 input{
	width: 40px;
	height: 20px;
	float: right;
	margin-top: 15px;
	margin-right: 25px;
	border:1px solid rgb(196, 194, 194);

}
/* 广告区 */
.tjnr1 #ydiv111{
	width: 130px;
	height: 100px;
	margin-top: -65px;
	margin-left: 545px;
	border:1px solid #666;

}.tjnr1 a:hover
{
	color:#66afe9;
}
.tjnr1  li{
	float: left;
    line-height: 52px;
	margin-left: 10px;
	
}
/* 设计样式注意优先级问题 */
.tjnr1 #a1 {
	padding: 0 10px;
	border-right: 1px solid rgb(108, 106, 110);
}
/* 清除a的边框线: 最后一个li里面的a */
.tjnr1 li:last-child #a1  {
    border: 0;
}

.tjnr1 #a11{
	
	float: left;
	width: 700px;
	margin-top: 500px;
	color: #66afe9;
	
	
}

/* 第二篇文章 */
#wcdiv2{
	width: 100%;
	height: 160px;
	


}
#ckqk{
	margin-left: 10px;
	
}
/* 阅读文章情况 */
/* #wcdiv2 #ckqk ul{
	margin-left: 20px;
} */
#wcdiv2 #ckqk li{
	
    line-height: 52px;
	
}
#hr1{
	text-align: center;
	width: 700px;
	border: 0.3px solid #c4c8cb;

}

hr{
	text-align: center;
	width: 680px;
	border: 0.3px solid #c4c8cb;
	margin-bottom: 10px;

}

/* 右侧部分设计 */
#right{
	width: 240px;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
		
}


/*右侧div*/
#right .right1
{
	width: 240px;
	height: 110px;
	float: left;

	
	background: rgb(246, 249, 249);
}
#right .right1 .wh{
	margin-top: 20px;
	margin-left: 50px;
	/* margin-top: 10px;
	margin-left: 20px; */
	font-size: 18px;


}
#right .right1 .qd1{
	width: 70px;
	height: 30px;
    margin-top: -30px;
	margin-right: 20px;
	float: right;
	color: #66afe9;
	font-size: 15px;
	background-color: rgb(246, 245, 244);
	border: 1px solid #66afe9;
	border-radius: 20px;
}
#right .right1 .dl{
	font-size: 15px;
	color: #8c8f91;
	margin-left: 50px;
	margin-top: 15px;
}
/* 广告1 */
#right .right2{
	width: 240px;
	height: 210px;
	float: left;
	margin-top: 10px;
	
	background: rgb(246, 249, 249);
}
/* 广告2 */
#right .right3{
	width: 240px;
	height: 210px;
	float: left;
	margin-top: 10px;
	
	background: rgb(246, 249, 249);
}



/* 扫码下载 */
#right .right4{
	width: 240px;
	height: 80px;
	float: left;
	margin-top: 10px;
	
	background: rgb(246, 249, 249);
}

#right .right4 .a1{
	margin-top: 15px;
	float: left;
	margin-left: 80px;
	font-size: 14px;
}
#right .right4 .p1{
	margin-top: 10px;
	margin-left: 80px;
	float: left;
	font-size: 11px;
	color: #c4c8cb;

}



/* 作者榜 */
#right .right5{
	width: 240px;
	height: 350px;
	float: left;
	margin-top: 10px;

	background: rgb(246, 249, 249);
}
#right .right5 h4{
	margin-top: 20px;
	margin-left: 10px;
	
}
/* 存放作者信息的div */
#right .right5 #zz1{

	height: 80px;
	font-size: 16px;

	text-align: center;
}

#right .right5 #zz1:hover{
	background-color: #dfe8e8;
}
#right .right5 #zz1 img{
	margin-top: 15px;
	margin-left: 10px;
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 30px;
}

#right .right5 #zz1 .zp1{
	margin-top: 15px;
	 float: left;
	margin-left:10px ;
	font-size: 15px; 
}

#right .right5 #zz1 .zp2{
	margin-top: 35px;
	float: left;
	margin-left:-65px ;
	font-size: 15px;
}

#right .right5 hr{
	width: 240px;
	border-bottom:1px solid #8c8f91 ;
}
#right .right5 #wzb{
	width: 240px;
	height: 30px;
	text-align: center;
	border-top: 1px solid #cdd1d1;

}
#right .right5 #wzb #a1{
	
	line-height: 40px;
	font-size: 16px;
	color: blue;
	text-align: center;

}






/* 操作指南 */
#right .right6{
	width: 240px;
	height: 210px;
	float: left;
	margin-top: 10px;

	background: rgb(246, 249, 249);
}
#right .right6 #zn {
	width: 240px;
	float: left;
	
}
#right .right6 #zn:hover{

	background-color: #dfe8e8;

}
#right .right6 #zn img{
	margin-top: 15px;
	margin-left: 10px;
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	
}
#right .right6 .wzn1{
	margin-top: 30px;
	float: left;
	margin-left:20px ;
	font-size: 15px;
}

/* #right .right6 #zn2 img{
	

	margin-top: 15px;
	margin-left: 10px;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	
}
#right .right6 .wzn2{
	margin-top: 35px;
	float: left;
	margin-left:20px ;
	font-size: 15px;
} */






#right .right7{
	width: 240px;
	height: 410px;
	float: left;
	margin-top: 10px;
	
	background: rgb(246, 249, 249);
}
#right .right7 li{
	margin-left: 10px;
	margin-top: 5px;
	padding: 0px;
	font-size: 12px;
	float: left;
    line-height: 22px;
}
#right .right7 li a:hover{
	color: #66afe9;
	text-decoration: none;
}
#right .right7 ul #wbm img{
	margin-top: 40px;
	margin-left: -90px;
	width: 30px;
	height: 30px;
}
#right .right7 ul #wxm img{
	margin-top: 40px;
	margin-left: -60px;
	width: 30px;
	height: 30px;
}
#right .right7 ul #wxm img:hover{
	display: block;
}
</style>